<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>志愿者登录</title>
    <include file="public@mobile_head">
</head>
<body class="page-login">
<!--头部-->
<div class="head zcdlHead">
    <div class="back">
        <a href="javascript:;" class="backTop" onclick="javascript:history.back(-1);">
            <i class="layui-icon layui-icon-left"></i>
        </a>
    </div>
    <div class="head-title">志愿者登录</div>
</div>
<div class="zctj registere">
    <div class="content registereForm">
        <!--<form class="layui-form" action="{:url('mobile/User/doLogin')}" method="post">-->
        <form class="layui-form">

            <div class="layui-form-item hiddenSty">
                <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                <div class="layui-input-block">
                    <input type="number" name="mobile"   id="js-mobile-input" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input zcdlInput">
                </div>
            </div>

            <div class="layui-form-item use-code hidden">
                <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                <div class="layui-input-block">
                    <input type="text" name="code" id="js-code"  placeholder="请输入手机验证码" style="width: 68%" autocomplete="off" class="layui-input yzmInput zcdlInput">
                    <a class="btn-success js-get-mobile-code" style="width: 30%;" data-wait-msg="[second]秒后才能再次获取" id="code" data-mobile-input="#js-mobile-input" data-url="{:url('user/VerificationCode/send')}" daty-type="register"data-init-second-left="60">验证码</a>
                </div>
            </div>

            <div class="layui-form-item use-pass">
                <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                <div class="layui-input-block">
                    <input id="js-passwd" type="password" name="password"  placeholder="请输入密码" autocomplete="off" class="layui-input zcdlInput">
                </div>
            </div>
           <div class="yzcTitle" >使用手机验证码</div>

            <div class="nextBtn">
                <button type="submit" class="layui-btn btn-primary btn-block js-ajax-submits">登录</button>
            </div>
            <div class="registered-link">
                <a href="{:url('mobile/User/register')}">
                    没有账号去注册
                </a>
            </div>

        </form>
    </div>
</div>
<!--<div class="btn">-->
    <!--<a href=""></a>-->
    <!--<button type="button" class="layui-btn">下一步</button>-->
<!--</div>-->
</body>
<script type="text/javascript" src="/html/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/html/layui/layui.js"></script>
<script>
    (function(){
        "use strict";
        var _code_sent =false;
        var layer;
        /* 0 密码登录 1 验证码登录 */
        var _login_type =0;
        var INTERVAL = 60;
        function tick_tock(){
            var _interval = INTERVAL;
            var n = setInterval(function () {
                            _interval--;
                            $('#code').text(_interval + 's后重新发');
                            if (_interval <= 0) {
                                clearInterval(n);
                                _code_sent = false;
                                $('#code').text('重新发送');
                            }
                    }, 1000);
        }
        function ajax_send_code(_mobile){
            $.ajax({
                url: "/portal/Phonecode/send",
                data: {mobile: _mobile},
                success: function (rsp) {
                    _code_sent =true;
                    layer.msg(rsp.errmsg);
                    if(rsp.error) return;                    
                    tick_tock();
                }
            })
        }
        function ajax_login(_data){
            $.ajax({
                url: "ajax_login",
                method:'POST',
                data: _data,
                success: function (rsp) {
                    console.log(rsp);
                    layer.msg(rsp.errmsg);
                    if(rsp.error) return;
                    window.location.href = '/mobile'

                }
            })
        }
        function bind_events(){
            $('.js-ajax-submits').off("click").on("click",function(e){
                e.preventDefault();
                var _data = {};
                var _mobile = $.trim($('#js-mobile-input').val()); //
                var reg = /^1\d{10}$/; //电话号码验证规则
                if(_mobile.length == 0 || !reg.test(_mobile)) { //如果电话号码为空或者电话号码输入不正确
                    return layer.msg("手机号不能为空！"); //提示信息
                }


                if(_login_type==0){
                    var _pwd = $.trim($('#js-passwd').val());
                    if(!_pwd){return layer.msg('请输入密码.');}
                    _data={
                        mobile:_mobile,
                        password:_pwd,
                        type:0
                    };

                }else if(_login_type==1){
                    var _code = $.trim($('#js-code').val());
                    _data={
                        mobile:_mobile,
                        code:_code,
                        type:1
                    }
                }
                ajax_login(_data);
            });
            $('.yzcTitle').off("click").on("click",function(e){
                if(_login_type==0){
                    _login_type =1;
                    $(this).html('使用密码登录')
                    $('.use-pass').addClass('hidden')
                    $('.use-code').removeClass('hidden')
                }else{
                    _login_type =0;
                    $(this).html('使用手机验证码')
                    $('.use-code').addClass('hidden')
                    $('.use-pass').removeClass('hidden')
                }
            });
            $('#code').off("click").on("click",function(e){
                if(_code_sent){
                    return layer.msg('操作过快，请稍候再试');
                }
                var _mobile = $.trim($('#js-mobile-input').val()); //
                var reg = /^1\d{10}$/; //电话号码验证规则
                if(_mobile.length == 0 || !reg.test(_mobile)) { //如果电话号码为空或者电话号码输入不正确
                    return layer.msg("手机号不能为空！"); //提示信息
                }
                if(!_code_sent){
                    ajax_send_code(_mobile);
                }
            });
        }

        $(function(){
            layui.use('layer',function(){
                layer=layui.layer;
                bind_events();
            });
            
        })
    })();

</script>
</html>